<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="img/favicon_1.ico">

        <title>Velonic - Responsive Admin Dashboard Template</title>

        <!-- Google-Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400,600,700,900,400italic' rel='stylesheet'>


        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">

        <!--Animation css-->
        <link href="css/animate.css" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        <link href="assets/ionicon/css/ionicons.min.css" rel="stylesheet" />


        <!-- Custom styles for this template -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/helper.css" rel="stylesheet">
        <link href="css/style-responsive.css" rel="stylesheet" />

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->

    </head>


    <body>

        <!-- Aside Start-->
        <aside class="left-panel">

            <!-- brand -->
            <div class="logo">
                <a href="index.html" class="logo-expanded">
                    <img src="img/single-logo.png" alt="logo">
                    <span class="nav-label">Velonic</span>
                </a>
            </div>
            <!-- / brand -->
        
            <!-- Navbar Start -->
            <nav class="navigation">
                <ul class="list-unstyled">
                    <li class="has-submenu"><a href="#"><i class="ion-home"></i> <span class="nav-label">Dashboard</span></a>
                        <ul class="list-unstyled">
                            <li><a href="index.html">Dashboard v1</a></li>
                            <li><a href="dashboard2.html">Dashboard v2</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-flask"></i> <span class="nav-label">UI Elements</span></a>
                        <ul class="list-unstyled">
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="icons.html">Icons</a></li>
                            <li><a href="panels.html">Panels</a></li>
                            <li><a href="tabs-accordions.html">Tabs &amp; Accordions</a></li>
                            <li><a href="modals.html">Modals</a></li>
                            <li><a href="bootstrap-ui.html">BS Elements</a></li>
                            <li><a href="progressbars.html">Progress Bars</a></li>
                            <li><a href="notification.html">Notification</a></li>
                            <li><a href="sweet-alert.html">Sweet-Alert</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-settings"></i> <span class="nav-label">Components</span></a>
                        <ul class="list-unstyled">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="portlets.html">Portlets</a></li>
                            <li><a href="widgets.html">Widgets</a></li>
                            <li><a href="nestable-list.html">Nesteble</a></li>
                            <li><a href="calendar.html">Calendar</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu active"><a href="#"><i class="ion-compose"></i> <span class="nav-label">Forms</span></a>
                        <ul class="list-unstyled">
                            <li class="active"><a href="form-elements.html">General Elements</a></li>
                            <li><a href="form-validation.html">Form Validation</a></li>
                            <li><a href="form-advanced.html">Advanced Form</a></li>
                            <li><a href="form-wizard.html">Form Wizard</a></li>
                            <li><a href="form-editor.html">WYSIWYG Editor</a></li>
                            <li><a href="code-editor.html">Code Editors</a></li>
                            <li><a href="form-uploads.html">Multiple File Upload</a></li>
                            <li><a href="image-crop.html">Image Crop</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-grid"></i> <span class="nav-label">Data Tables</span></a>
                        <ul class="list-unstyled">
                            <li><a href="tables.html">Basic Tables</a></li>
                            <li><a href="table-datatable.html">Data Table</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-stats-bars"></i> <span class="nav-label">Charts</span></a>
                        <ul class="list-unstyled">
                            <li><a href="morris-chart.html">Morris Chart</a></li>
                            <li><a href="chartjs.html">Chartjs</a></li>
                            <li><a href="flot-chart.html">Flot Chart</a></li>
                            <li><a href="rickshaw-chart.html">Rickshaw Chart</a></li>
                            <li><a href="c3-chart.html">C3 Chart</a></li>
                            <li><a href="other-chart.html">Other Chart</a></li>
                        </ul>
                    </li>

                    <li class="has-submenu"><a href="#"><i class="ion-email"></i> <span class="nav-label">Mail</span></a>
                        <ul class="list-unstyled">
                            <li><a href="inbox.html">Inbox</a></li>
                            <li><a href="email-compose.html">Compose Mail</a></li>
                            <li><a href="email-read.html">View Mail</a></li>
                        </ul>
                    </li>

                    <li class="has-submenu"><a href="#"><i class="ion-location"></i> <span class="nav-label">Maps</span></a>
                        <ul class="list-unstyled">
                            <li><a href="gmap.html"> Google Map</a></li>
                            <li><a href="vector-map.html"> Vector Map</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-document"></i> <span class="nav-label">Pages</span></a>
                        <ul class="list-unstyled">
                            <li><a href="profile.html">Profile</a></li>
                            <li><a href="timeline.html">Timeline</a></li>
                            <li><a href="invoice.html">Invoice</a></li>
                            <li><a href="contact.html">Contact-list</a></li>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="register.html">Register</a></li>
                            <li><a href="recoverpw.html">Recover Password</a></li>
                            <li><a href="lock-screen.html">Lock Screen</a></li>
                            <li><a href="blank.html">Blank Page</a></li>
                            <li><a href="404.html">404 Error</a></li>
                            <li><a href="404_alt.html">404 alt</a></li>
                            <li><a href="500.html">500 Error</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
                
        </aside>
        <!-- Aside Ends-->


        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            <header class="top-head container-fluid">
                <button type="button" class="navbar-toggle pull-left">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- Search -->
                <form role="search" class="navbar-left app-search pull-left hidden-xs">
                  <input type="text" placeholder="Search..." class="form-control">
                </form>
                
                <!-- Left navbar -->
                <nav class=" navbar-default hidden-xs" role="navigation">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                          <a data-toggle="dropdown" class="dropdown-toggle" href="#">English <span class="caret"></span></a>
                            <ul role="menu" class="dropdown-menu">
                                <li><a href="#">German</a></li>
                                <li><a href="#">French</a></li>
                                <li><a href="#">Italian</a></li>
                                <li><a href="#">Spanish</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Files</a></li>
                        <li><a href="../frontend/" target="_blank">Frontend</a></li>
                    </ul>
                </nav>
                
                <!-- Right navbar -->
                <ul class="list-inline navbar-right top-menu top-right-menu">  
                    <!-- mesages -->  
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-envelope-o "></i>
                            <span class="badge badge-sm up bg-purple count">4</span>
                        </a>
                        <ul class="dropdown-menu extended fadeInUp animated nicescroll" tabindex="5001">
                            <li>
                                <p>Messages</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-2.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">10 seconds ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-3.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">3 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-4.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">10 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <p><a href="inbox.html" class="text-right">See all Messages</a></p>
                            </li>
                        </ul>
                    </li>
                    <!-- /messages -->
                    <!-- Notification -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-bell-o"></i>
                            <span class="badge badge-sm up bg-pink count">3</span>
                        </a>
                        <ul class="dropdown-menu extended fadeInUp animated nicescroll" tabindex="5002">
                            <li class="noti-header">
                                <p>Notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-user-plus fa-2x text-info"></i></span>
                                    <span>New user registered<br><small class="text-muted">5 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-diamond fa-2x text-primary"></i></span>
                                    <span>Use animate.css<br><small class="text-muted">5 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-bell-o fa-2x text-danger"></i></span>
                                    <span>Send project demo files to client<br><small class="text-muted">1 hour ago</small></span>
                                </a>
                            </li>
                            
                            <li>
                                <p><a href="#" class="text-right">See all notifications</a></p>
                            </li>
                        </ul>
                    </li>
                    <!-- /Notification -->

                    <!-- user login dropdown start-->
                    <li class="dropdown text-center">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar-2.jpg" class="img-circle profile-img thumb-sm">
                            <span class="username">John Deo </span> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu extended pro-menu fadeInUp animated" tabindex="5003" style="overflow: hidden; outline: none;">
                            <li><a href="profile.html"><i class="fa fa-briefcase"></i>Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
                            <li><a href="#"><i class="fa fa-bell"></i> Friends <span class="label label-info pull-right mail-info">5</span></a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>
                    <!-- user login dropdown end -->       
                </ul>
                <!-- End right navbar -->

            </header>
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid">
                <div class="page-title"> 
                    <h3 class="title">General Elements</h3> 
                </div>

                <div class="row">
                    <!-- Basic example -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Basic example</h3></div>
                            <div class="panel-body">
                                <form role="form">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                    </div>
                                    <div class="form-group">
                                        <label class="cr-styled">
                                            <input type="checkbox">
                                            <i class="fa"></i> 
                                            Remember me
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-purple">Submit</button>
                                </form>
                            </div><!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col-->
                    
                    <!-- Horizontal form -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Horizontal form</h3></div>
                            <div class="panel-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">
                                        <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                                        <div class="col-sm-9">
                                          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
                                        <div class="col-sm-9">
                                          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputPassword4" class="col-sm-3 control-label">Re Password</label>
                                        <div class="col-sm-9">
                                          <input type="password" class="form-control" id="inputPassword4" placeholder="Retype Password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-9">
                                            <label class="cr-styled">
                                                <input type="checkbox">
                                                <i class="fa"></i> 
                                                Check me out !
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group m-b-0">
                                        <div class="col-sm-offset-3 col-sm-9">
                                          <button type="submit" class="btn btn-info">Sign in</button>
                                        </div>
                                    </div>
                                </form>
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->

                </div> <!-- End row -->



                <!-- Inline Form -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Inline Form</h3></div>
                            <div class="panel-body">
                            
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                                    </div>
                                      
                                    <div class="form-group m-l-10">
                                        <label class="sr-only" for="exampleInputPassword2">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                                    </div>
                                    <div class="form-group m-l-10">
                                        <label class="cr-styled">
                                            <input type="checkbox">
                                            <i class="fa"></i> 
                                            Remember me
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-success m-l-10">Sign in</button>
                                </form>
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                     
                </div> <!-- End row -->

                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Form elements</h3></div>
                            <div class="panel-body">
                                <form class="form-horizontal" role="form">                                    
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Text</label>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control" value="Some text value...">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="example-email">Email</label>
                                        <div class="col-md-10">
                                            <input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Password</label>
                                        <div class="col-md-10">
                                            <input type="password" class="form-control" value="password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Readonly</label>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control" readonly="" value="Readonly value">
                                        </div>
                                    </div>                                    
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Disabled</label>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control" disabled="" value="Disabled value">
                                        </div>
                                    </div>                                    
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Placeholder</label>
                                        <div class="col-md-10">
                                            <input type="text" class="form-control" placeholder="placeholder">
                                        </div>
                                    </div>                                                                        
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">Text area</label>
                                        <div class="col-md-10">
                                            <textarea class="form-control" rows="5"></textarea>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Static control</label>
                                        <div class="col-sm-10">
                                          <p class="form-control-static">email@example.com</p>
                                        </div>
                                    </div>  
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Helping text</label>
                                        <div class="col-sm-7">
                                          <input type="text" class="form-control" placeholder="Helping text">
                                          <span class="help-block"><small>A block of help text that breaks onto a new line and may extend beyond one line.</small></span>
                                        </div>
                                    </div>  

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Input Select</label>
                                        <div class="col-sm-10">
                                            <select class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                            <h6>Multiple select</h6>
                                            <select multiple="" class="form-control">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                    </div>
                   
                                </form>
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                </div> <!-- End row -->




                <div class="row">

                    <!-- Input States -->
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Input States</h3></div>
                            <div class="panel-body">
                            
                                <form class="form-horizontal" role="form">
                                  
                                    <div class="form-group has-success">
                                        <label class="col-md-3 control-label" for="state-success">Success</label>
                                        <div class="col-md-6">
                                            <input type="text" id="state-success" name="state-success" class="form-control" placeholder="...">
                                        </div>
                                    </div>


                                    <div class="form-group has-warning">
                                        <label class="col-md-3 control-label" for="state-warning">Warning</label>
                                        <div class="col-md-6">
                                            <input type="text" id="state-warning" name="state-warning" class="form-control" placeholder="...">
                                        </div>
                                    </div>

                                    <div class="form-group has-error">
                                        <label class="col-md-3 control-label" for="state-danger">Danger</label>
                                        <div class="col-md-6">
                                            <input type="text" id="state-danger" name="state-danger" class="form-control" placeholder="...">
                                        </div>
                                    </div>

                                    <div class="form-group has-success has-feedback">
                                        <label class="col-sm-3 control-label">Input with success </label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control">
                                            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                                        </div>
                                    </div>

                                    <div class="form-group has-warning has-feedback">
                                        <label class="col-sm-3 control-label">Input with warning </label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control inputmask">
                                            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                                        </div>
                                    </div>

                                    <div class="form-group has-error has-feedback">
                                        <label class="col-sm-3 control-label">Input with error </label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control inputmask">
                                            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                                        </div>
                                    </div>

                                    <div class="form-group has-feedback">
                                        <label class="col-sm-3 control-label">Custom Icons</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" placeholder="Custom icons">
                                            <i class="fa fa-envelope form-control-feedback l-h-34"></i>
                                        </div>
                                    </div>
                                </form>
                            
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Input Sizes</h3></div>
                            <div class="panel-body">
                            
                                <form role="form" class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="example-input-small">Small</label>
                                        <div class="col-sm-6">
                                            <input type="text" id="example-input-small" name="example-input-small" class="form-control input-sm" placeholder=".input-sm">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="example-input-normal">Normal</label>
                                        <div class="col-sm-6">
                                            <input type="text" id="example-input-normal" name="example-input-normal" class="form-control" placeholder="Normal">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label" for="example-input-large">Large</label>
                                        <div class="col-sm-6">
                                            <input type="text" id="example-input-large" name="example-input-large" class="form-control input-lg" placeholder=".input-lg">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Grid Sizes</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control" placeholder=".col-sm-4">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-5 col-sm-offset-3">
                                            <input type="text" class="form-control" placeholder=".col-sm-5">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-6 col-sm-offset-3">
                                            <input type="text" class="form-control" placeholder=".col-sm-6">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-9 col-sm-offset-3">
                                            <input type="text" class="form-control" placeholder=".col-sm-9">
                                        </div>
                                    </div>
                                </form>
                            
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->

                </div> <!-- End row -->

                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Checkboxs</h3></div>
                            <div class="panel-body">
                            
                                <form class="form-horizontal" role="form">

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Checkboxes</label>
                                        <div class="col-md-9">
                                            <div class="checkbox">
                                                <label class="cr-styled">
                                                    <input type="checkbox">
                                                    <i class="fa"></i> 
                                                    Unchecked
                                                </label>
                                            </div>

                                            <div class="checkbox">
                                                <label class="cr-styled">
                                                    <input type="checkbox" checked="">
                                                    <i class="fa"></i> 
                                                    Checked
                                                </label>
                                            </div>

                                            <div class="checkbox">
                                                <label class="cr-styled">
                                                    <input type="checkbox" disabled="">
                                                    <i class="fa"></i> 
                                                    Disabled Unchecked
                                                </label>
                                            </div>

                                            <div class="checkbox">
                                                <label class="cr-styled">
                                                    <input type="checkbox" disabled="" checked="">
                                                    <i class="fa"></i> 
                                                    Disabled Checked
                                                </label>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->
                                  
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Inline Checkboxes</label>
                                        <div class="col-md-9">

                                            <div class="checkbox-inline">
                                                <label class="cr-styled">
                                                    <input type="checkbox">
                                                    <i class="fa"></i> 
                                                    HTML
                                                </label>
                                            </div>

                                            <div class="checkbox-inline">
                                                <label class="cr-styled">
                                                    <input type="checkbox">
                                                    <i class="fa"></i> 
                                                    CSS
                                                </label>
                                            </div>

                                            <div class="checkbox-inline">
                                                <label class="cr-styled">
                                                    <input type="checkbox">
                                                    <i class="fa"></i> 
                                                    Javascript
                                                </label>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->
                                  
                                </form>
                            
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->


                     <div class="col-md-6">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Radios</h3></div>
                            <div class="panel-body">
                            
                                <form class="form-horizontal" role="form">

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Radios</label>
                                        <div class="col-md-9">
                                            <div class="radio">
                                                <label class="cr-styled" for="example-radio1">
                                                    <input type="radio" id="example-radio1" name="example-radios" value="option1"> 
                                                    <i class="fa"></i>
                                                    Unchecked 
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label class="cr-styled" for="example-radio2">
                                                    <input type="radio" id="example-radio2" name="example-radios" value="option2" disabled=""> 
                                                    <i class="fa"></i> 
                                                    Disabled radio
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label class="cr-styled" for="example-radio3">
                                                    <input type="radio" id="example-radio3" name="example-radios2" value="option3" disabled="" checked=""> 
                                                    <i class="fa"></i> 
                                                    Disabled selected
                                                </label>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Inline Radios</label>
                                        <div class="col-md-9">
                                            <div class="radio-inline">
                                                <label class="cr-styled" for="example-radio4">
                                                    <input type="radio" id="example-radio4" name="example-radios1" value="option1"> 
                                                    <i class="fa"></i>
                                                    HTML 
                                                </label>
                                            </div>
                                            <div class="radio-inline">
                                                <label class="cr-styled" for="example-radio5">
                                                    <input type="radio" id="example-radio5" name="example-radios1" value="option2"> 
                                                    <i class="fa"></i> 
                                                    CSS
                                                </label>
                                            </div>
                                            <div class="radio-inline">
                                                <label class="cr-styled" for="example-radio6">
                                                    <input type="radio" id="example-radio6" name="example-radios1" value="option3"> 
                                                    <i class="fa"></i> 
                                                    Javascript
                                                </label>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->
                                  
                                </form>
                            
                            </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                     
                </div> <!-- End row -->


                <!-- Input groups -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default">
                            <div class="panel-heading"><h3 class="panel-title">Input groups</h3></div>
                            <div class="panel-body">
                            
                                <form class="form-horizontal" role="form">
                                    <div class="form-group">

                                        <label class="col-md-2 control-label" for="example-input1-group1">Static</label>
                                        <div class="col-md-7">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control" placeholder="Username">
                                            </div>
                                        </div>

                                        <div class="col-md-7 col-md-offset-2">
                                            <div class="input-group m-t-10">
                                                <input type="email" id="example-input2-group1" name="example-input2-group1" class="form-control" placeholder="Email">
                                                <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                                            </div>
                                        </div>
                                        <div class="col-md-7 col-md-offset-2">
                                            <div class="input-group m-t-10">
                                                <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
                                                <input type="text" id="example-input3-group1" name="example-input3-group1" class="form-control" placeholder="..">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->

                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="example-input1-group2">Buttons</label>
                                        <div class="col-md-7">
                                            <div class="input-group">
                                                <span class="input-group-btn">
                                                <button type="button" class="btn btn-effect-ripple btn-primary"><i class="fa fa-search"></i></button>
                                                </span>
                                                <input type="text" id="example-input1-group2" name="example-input1-group2" class="form-control" placeholder="Search">
                                            </div>
                                        </div>
                                        <div class="col-md-7 col-md-offset-2">
                                            <div class="input-group m-t-10">
                                                <input type="email" id="example-input2-group2" name="example-input2-group2" class="form-control" placeholder="Email">
                                                <span class="input-group-btn">
                                                <button type="button" class="btn btn-effect-ripple btn-primary">Submit</button>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="col-md-7 col-md-offset-2">
                                            <div class="input-group m-t-10">
                                                <span class="input-group-btn">
                                                <button type="button" class="btn btn-effect-ripple btn-primary"><i class="fa fa-facebook"></i></button>
                                                </span>
                                                <input type="text" id="example-input3-group2" name="example-input3-group2" class="form-control" placeholder="Search">
                                                <span class="input-group-btn">
                                                <button type="button" class="btn btn-effect-ripple btn-primary"><i class="fa fa-twitter"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->

                                    <div class="form-group">
                                        <label class="col-md-2 control-label" for="example-input1-group3">Dropdowns</label>
                                        <div class="col-md-7">
                                            <div class="input-group">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-effect-ripple btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;">Action <span class="caret"></span></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="javascript:void(0)">Action</a></li>
                                                        <li><a href="javascript:void(0)">Another action</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="javascript:void(0)">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <input type="text" id="example-input1-group3" name="example-input1-group3" class="form-control" placeholder="Username">
                                            </div>
                                        </div>
                                        <div class="col-md-7 col-md-offset-2">
                                            <div class="input-group m-t-10">
                                                <input type="email" id="example-input2-group3" name="example-input2-group3" class="form-control" placeholder="Email">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-effect-ripple btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;">Action <span class="caret"></span></button>
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li><a href="javascript:void(0)">Action</a></li>
                                                        <li><a href="javascript:void(0)">Another action</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="javascript:void(0)">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7 col-md-offset-2">
                                            <div class="input-group m-t-10">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-effect-ripple btn-primary" style="overflow: hidden; position: relative;">Action</button>
                                                    <button type="button" class="btn btn-effect-ripple btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;"><span class="caret"></span></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="javascript:void(0)">Action</a></li>
                                                        <li><a href="javascript:void(0)">Another action</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="javascript:void(0)">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <input type="text" id="example-input3-group3" name="example-input3-group3" class="form-control" placeholder="..">
                                                <div class="input-group-btn">
                                                    <button type="button" class="btn btn-effect-ripple btn-primary dropdown-toggle" data-toggle="dropdown" style="overflow: hidden; position: relative;"><span class="caret"></span></button>
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li><a href="javascript:void(0)">Action</a></li>
                                                        <li><a href="javascript:void(0)">Another action</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="javascript:void(0)">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- form-group -->
                                  
                                </form>
                            
                           </div> <!-- panel-body -->
                        </div> <!-- panel -->
                    </div> <!-- col -->
                </div> <!-- End row -->

            </div>
            <!-- Page Content Ends -->
            <!-- ================== -->

            <!-- Footer Start -->
            <footer class="footer">
                2015 © Velonic.
            </footer>
            <!-- Footer Ends -->



        </section>
        <!-- Main Content Ends -->
        


        <!-- js placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/jquery.nicescroll.js" type="text/javascript"></script>


        <script src="js/jquery.app.js"></script>


    </body>
</html>
